import { merge } from "lodash"
import FormButton from "../Form/button.vue";
import FormTag from "../Form/tag.vue";
FormButton.createBtn = function (options = []) {
    if (!Array.isArray(options)) {
        options = [options]
    }
    return options.map(option => {
        option = merge({
            class: "",
            style: "display: inline-block;"
        }, option)
        const h = this.$createElement
        if (options.perm && !this.$store.state[options.perm]) {
            option.tip = ''
            option.onClick = () => null
        }
        return (
            <FormButton
                style={option.style}
                class={option.class}
                {...{
                    props: option
                }}
            />
        )
    })
}
FormButton.createLink = function (options = []) {
    if (!Array.isArray(options)) {
        options = [options]
    }
    return options.map(option => {
        const h = this.$createElement
        return (
            <span class="cursor line" onClick={option.onClick}>{option.label}</span>
        )
    })
}


/**
 * 带复制的链接按钮
 * @returns 
 */
FormButton.createCopy = function (options = []) {
    if (!Array.isArray(options)) {
        options = [options]
    }
    return options.map(option => {
        const h = this.$createElement
        return (
            <div class="flex-center-row" style={option.style}>
                {!option.onClick?<span class="flex-1">{option.label}</span>:this.createLink([option])}
                <i
                    class="el-icon-document-copy"
                    onClick={() => this.doCopy(option.label)}
                    title={$AONE_LAN.copy}
                />
            </div>
        )
    })
}

FormButton.createEdit = function (options = []) {
    if (!Array.isArray(options)) {
        options = [options]
    }
    return options.map(option => {
        const { background } = option
        let style = "flex:1;"
        if (background) {
            style += "color:#fff;background:" + background
        }
        const visiable = option.perm && this.$store.state[option.perm]
        const h = this.$createElement
        return (
            <div class="cash" style="display: flex;">
                <span style={style}>{option.label}</span>
                {visiable ? <i style='margin-left:10px;color:#81a2ce;cursor: pointer;' onClick={option.onClick} class="line">{$AONE_LAN.edit}</i> : null}
            </div>
        )
    })
}

FormButton.createTag = function (options = []) {
    if (!Array.isArray(options)) {
        options = [options]
    }
    return options.map(option => {
        const h = this.$createElement
        if (options.perm && !this.$store.state[options.perm]) {
            option.tip = ''
            option.onClick = () => null
        }
        option.style = "cursor: pointer;" + option.style
        return (
            <FormTag
                style={option.style}
                class={option.class}
                {...{
                    props: option
                }}
            />
        )
    })
}

export default FormButton